import React, {Component} from 'react'
import {
    View,
    Image,
    Dimensions,
    Text,
    FlatList,
    TouchableOpacity
}from 'react-native'

var {width} = Dimensions.get('window');
export default class MenuList extends Component {
    static defaultProps = {
        flatListData: []
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        let columns=this.props.flatListData.length/2;
        return (

                <FlatList
                    scrollEnabled={false}
                    data={this.props.flatListData}
                    keyExtractor={(item, index) => index}
                    numColumns={columns}
                    horizontal={false}
                    columnWrapperStyle={{width:width,backgroundColor:'white'}}
                    renderItem={({item,index}) =>
                        <TouchableOpacity onPress={()=>this.itemPress(index)}>
                        <View style={{alignItems:'center',width:width/columns}}>
                            <Image source={{uri:item.image}} style={{width:52,height:52}}/>
                            <Text>{item.title}</Text>
                        </View>
                        </TouchableOpacity>
                    }
                />

        )
    }

    itemPress(msg){
        this.props.navigation.navigate('Test')
    }

}
